import React, { useEffect, useState } from "react";
import instance from "../../api/request";
import { NavBar, Space, Toast } from "antd-mobile";
import styles from "./Index.module.css";
import { useNavigate } from "react-router-dom";
function Index() {
  const nav=useNavigate()
  const [qian, setQian] = useState([]);
  const [transactions, setTransactions] = useState([]);

  useEffect(() => {
    instance.get("/api/user/verify/v1/findUserWallet").then((res) => {
      console.log(res);
      setQian(res.data.result)
    });
    
    // 模拟交易记录数据
    const mockTransactions = [
      { type: "问诊咨询", date: "2018.11.10", amount: -500 },
      { type: "签到", date: "2018.11.09", amount: +10 },
      { type: "参与活动", date: "2018.11.08", amount: -20 },
      { type: "发布病历", date: "2018.11.07", amount: +50 },
      { type: "提现", date: "2018.11.06", amount: -300 },
      { type: "签到", date: "2018.11.05", amount: +10 },
    ];
    setTransactions(mockTransactions);
  }, []);
  return (
    <div className={styles.qianzong}>
      <div className={styles.tou}>
         <NavBar onBack={()=>nav(-1)} style={{color:'white'}}>
          我的钱包
         </NavBar>
         <div className={styles.balance}>
           <div className={styles.balanceCircle}>
             <div className={styles.balanceAmount}>{qian}</div>
             <div className={styles.balanceUnit}>H币</div>
           </div>
           <div className={styles.balanceTip}>满2000H币可提现</div>
           <div className={styles.actionButtons}>
             <button className={styles.withdrawBtn} onClick={()=>nav('/ti')}>提现</button>
             <button className={styles.rechargeBtn} onClick={()=>nav('/chong')}>充值</button>
           </div>
         </div>
      </div>
      
      {/* 交易记录列表 */}
      <div className={styles.transactionList}>
        {transactions.map((transaction, index) => (
          <div key={index} className={styles.transactionItem}>
            <div className={styles.transactionInfo}>
              <div className={styles.transactionType}>{transaction.type}</div>
              <div className={styles.transactionDate}>{transaction.date}</div>
            </div>
            <div className={`${styles.transactionAmount} ${transaction.amount > 0 ? styles.positive : styles.negative}`}>
              {transaction.amount > 0 ? '+' : ''}{transaction.amount}H币
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Index;
